<!-- 定义模版对象 -->
<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域-->
      <div id="msg" style="display: block;">
        <div class="avatar_box">
          <img src="../assets/logo.png" alt="login图片" />
        </div>

        <!-- 登陆表单区域 ref代表当前表单引用对象-->
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="0" class="login_form">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" prefix-icon="iconfont iconuser"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" prefix-icon="iconfont iconsuo" type="password"></el-input>
          </el-form-item>
          <el-form-item class="btns">
				<el-button type="primary" @click="login">用户登录</el-button>
            <el-button type="danger" @click="zhuce">注册</el-button>
            <el-button type="info" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="btn">
      <font color="dodgerblue" size="5">
        <center>
		
          <el-button @click="show" type="text" size="big" round>易点餐后台管理系统</el-button><br />
        </center>
      </font>
    </div>

    <!--
        :visible.sync  控制对话框是否展现
      -->
    <el-dialog title="用户注册" :visible.sync="addUserDialogVisible" width="30%" center top="4vh" @close="quxiao">

      <el-form :model="addUserForm" :rules="rules" ref="addUserRuleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="密码确认" prop="password2">
          <el-input v-model="addUserForm.password2" type="password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="addUserForm.realname"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="addUserForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input v-model="addUserForm.gender"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addUserForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNum">
          <el-input v-model="addUserForm.idNum"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="addUserBtn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<!-- 定义JS变量 -->
<script>
  import SIdentify from './SIdentify.vue';
  export default {
    components: {
      SIdentify
    },
    
    // 定义组件的属性 需要有返回值
    data() {

      const checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };

      //校验手机号规则
      const checkPhone = (rule, value, callback) => {

        //定义校验手机号的正则语法
        const phoneRege = /^1[3456789][0-9]{9}$/
        if (phoneRege.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的手机号'))

      }

      //密码确认  判断与password是否相同
      const checkPassword = (rule, value, callback) => {

        if (value !== this.addUserForm.password) {
          return callback(new Error('2次密码填写不一致'))
        }
        //如果相同,则调用回调函数
        callback()
      }


      return {
        form: {},
        formValidate: {},

        addUserDialogVisible: false,
        //设定新增用户的对象
        addUserForm: {
          username: '',
          password: '',
          password2: '',
          realname: '',
          age: '',
          gender: '',
          idNum: '',
          phone: ''
        },
        rules: {
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            }
          ],
          password2: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            },
            {
              validator: checkPassword,
              trigger: 'blur'
            }
          ],
          age: [{
              required: true,
              message: '请输入年龄',
              trigger: 'blur'
            },
            {
              validator: checkAge,
              trigger: 'blur'
            }
          ],
          phone: [{
              required: true,
              message: '请输入电话',
              trigger: 'blur'
            },
            {
              min: 11,
              max: 11,
              message: '长度必须11个字符',
              trigger: 'blur'
            },
            {
              validator: checkPhone,
              trigger: 'blur'
            }
          ],
          realname: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            }
          ],
          gender: [{
              required: true,
              message: '请输入姓别',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 1,
              message: '只能输入男或女',
              trigger: 'blur'
            }
          ],
          idNum: [{
              required: true,
              message: '请输入身份证号',
              trigger: 'blur'
            },
            {
              min: 18,
              max: 18,
              message: '输入正确的身份证号',
              trigger: 'blur'
            }
          ]
        },

        // 如果是form表单提交一般会采用对象封装
        loginForm: {
          username: '',
          password: ''
        },
        identifyCode: '',
        identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz'
      }
    },
    methods: {
      show() {
        this.$router.push('/loginV')
      },
      
      makeCode(o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
        }
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      resetBtn() {
        // 获取当前表单对象 之后重置数据
        this.$refs.loginFormRef.resetFields()
      },
      login() {
        //要在登录前 校验数据是否填写完成.
        this.$refs.loginFormRef.validate(async valid => {
          // 如过没有效验成功 则直接结束调用
          if (!valid) return
          //发起ajax请求
          const {
            data: result
          } = await this.$http.post('/user/login', this.loginForm)
          //1.判断状态码不为200  用户名或密码错误
          if (result.status !== 200)
            return this.$message.error('用户名或密码错误');
          //如果是200,应该提示登录成功
          this.$message.success('用户登录成功');
          //用户登录信息  用户名:admin  密码 admin123456
          //将数据保存到session
          let token = result.data.token
          window.sessionStorage.setItem('token', token)
          window.sessionStorage.setItem('id', result.data.id)
          //将页面重定向到home页面
          this.$router.push('/userHome')
        })
      },
      zhuce() {
        this.addUserDialogVisible = true,
          msg.style = "display:none"
      },
      addUserBtn() {
        //对整个表单重新进行校验  1.获取表单的对象  2.进行数据校验
        this.$refs.addUserRuleForm.validate(async valid => {
          if (!valid) return this.$message.error("请正确填写数据")
          //之后发起ajax请求实现用户新增
          const {
            data: result
          } = await this.$http.post('/user/addUser', this.addUserForm)
          if (result.status !== 200) return this.$message.error("用户注册失败")
          this.$message.success("用户注册成功")
          this.addUserDialogVisible = false

        })
      },
      quxiao() {
        this.addUserDialogVisible = false,
          this.$refs.addUserRuleForm.resetFields(),
          msg.style = "display:block"

      }
    },
    mounted() {
      // 初始化验证码
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    }
  }
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
  .login_container {
    background: url(../assets/images/xqwa.jpg);
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
  }

  .btn {
    position: absolute;
    left: 35%;
    top: 90%;
  }

  .login_box {
    width: 450px;
    height: 300px;
    // background-color: #FFFFFF;
    /* 设定圆弧角*/
    border-radius: 10px;
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translate(-50%, -50%);



    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #00aa00;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #DDDDDD;
      /* 添加阴影*/
      position: absolute;
      /* 绝对定位*/
      left: 50%;
      /* 距离左侧50%*/
      transform: translate(-50%, -50%);
      /*回调50%*/
      background-color: #ffffff;

      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        // background-color: #00ff00;
      }
    }

    .btns {
      display: flex;
      justify-content: flex-end;

    }

    .login_form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
</style>
